<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>数据统计 -- 扫码出货汇总查询</title>
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap.min.css">
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="${contextPath}/static/layer/css/layui.css">
    <script src="${contextPath}/static/statistics/js/jquery.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap.min.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.min.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.fr.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap.min.js"></script>
    <script src="${contextPath}/static/statistics/js/vue.js"></script>
    <script src="${contextPath}/static/statistics/js/echarts.min.js"></script>
    <script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.mockjax.js"></script>
    <script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.autocomplete.js"></script>
    <style>
        .autocomplete-suggestions {
            border: 1px solid #999;
            background: #FFF;
            overflow: auto;
        }

        .autocomplete-suggestion {
            padding: 2px 5px;
            white-space: nowrap;
            overflow: hidden;
        }

        .autocomplete-selected {
            background: #F0F0F0;
        }

        .autocomplete-suggestions strong {
            font-weight: normal;
            color: #3399FF;
        }
    </style>
</head>
<body style="background: rgba(119, 118, 118, 0.15);">
<div class="container-fluid" id="app">
    <form class="form-inline" style="margin-top: 50px; margin-bottom: 5px;">
        <div class="form-group">
            <input type="text" class="form-control" id="turnCreateDate" placeholder="查询开始时间">
        </div>
        <div class="form-group">
            <input type="text" class="form-control" id="bindCreateDate" placeholder="查询结束时间">
        </div>
        <%--<shiro:hasPermission name="CHECKING:BANK">--%>
            <%--<div class="form-group">--%>
                <%--<select class="form-control" id="merNameInput" style="width: 150px">--%>
                    <%--<option value="">—厂家—</option>--%>
                    <%--<option v-for="merName in merNames">{{merName}}</option>--%>
                <%--</select>--%>
            <%--</div>--%>
        <%--</shiro:hasPermission>--%>
        <shiro:hasPermission name="CHECKING:TBCOCOMPF">
            <div class="form-group">
                <select class="form-control" style="width: 150px" id="payTypeSelect">
                    <option value="">—类别—</option>
                    <option value="1">烟</option>
                    <option value="2">非烟</option>
                </select>
            </div>
        </shiro:hasPermission>
        <button type="button" class="btn btn-success" onclick="queryOrder();">查询</button>
        <button type="button" title="根据查询条件导出所有记录" onclick="exportExcel();"
                class="btn btn-info">导出Excel
        </button>
    </form>
    <div class="row" style="background-color: rgb(53, 147, 202);margin-right: 0px;margin-left: 0px; height: 37px;">
        <div class="col-sm-10" style="margin-top: 6px;">
            <strong style="font-size: 18px;color: #f9f9f9;">扫码出货汇总查询</strong>
        </div>
        <div class="col-sm-2" style="text-align: right">

        </div>
    </div>
    <div class="table-responsive" id="tableContainer" style="height: 410px">
        <table class="table table-striped table-condensed table-bordered">
            <thead style="background-color:#eee;">
            <tr>
                <th>区域</th>
                <th>试点户数</th>
                <th>期初库存（条）</th>

                <th>已扫码户数</th>

                <th>扫码次（笔）数合计</th>
                <th>扫码销售量（包）</th>
                <th>销售金额（元）</th>

                <th>购进量（条）</th>
                <th>购进金额（元）</th>

                <th>剩余库存量（条）</th>
                <th>库存金额（元）</th>
                <th>未扫码户数</th>

                <th>操作</th>
            </tr>
            </thead>
            <tbody>

            <tr v-for="(order,index) in orderList">
                <td>{{order.SHORT_NAME}}</td>
                <td>{{order.IS_EXP}}</td>
                <td>{{order.STOCK + order.CHU_QUANTITY}}</td>

                <td>{{order.SHOP_ID}}</td>

                <td>{{order.SCAN_SHI}}</td>
                <td>{{order.CHU_QUANTITY}}</td>
                <td>{{order.AMT}}</td>

                <td>{{order.QUANTITY}}</td>
                <td>{{order.TOTAL_PRICE}}</td>

                <td>{{order.STOCK}}</td>
                <td>{{order.PRICE}}</td>
                <%--<td>{{order.IS_EXP - order.SHOP_ID}}</td>--%>

                <td>{{order.NO_IS_EXP}}</td>
                <td>
                    <button v-on:click="goToDetail(index)">明细</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div style="text-align: right;margin-top: 10px;" id="pageDiv"></div>
</div>

<form action="${contextPath}/checking/checkingDetailPage" method="post" target="_blank" id="goToDetailPage"
      style="display:none">
    <textarea type="hidden" id="goToDetailPageData" name="rowData"></textarea>
</form>
<form action="${contextPath}/checking/exportExcel" method="post" id="exportExcel" style="display:none">
    <input type="hidden" name="tbcocompName" id="exportExcelParamTbcocompName">
    <input type="hidden" name="bankName" id="exportExcelParamBankName">
    <input type="hidden" name="merName" id="exportExcelParamMerName">
    <input type="hidden" name="settleDate" id="exportExcelParamSettleDate">
    <input type="hidden" name="payType" id="exportExcelParamPayType">
    <input type="hidden" name="tableType" value="general">
</form>
</body>
<script src=${contextPath}/static/layer/layui.all.js></script>
<script type="text/javascript">
    var laypage = layui.laypage
        , layer = layui.layer;


    var queryModel = {
        turnCreateDate: "",
        bindCreateDate: "",
        payTypeSelect: ""
    }

    var app = new Vue({
        el: '#app',
        data: {
            orderList: [],

        },
        methods: {}
    })

    var getOrder = function (queryModel) {
        layer.load(1)
        $.ajax({
            url: '${contextPath}/count/getScanCode', //localhost:8080
            type: 'post',
            data: queryModel,
            success: function (data) {
                layer.closeAll('loading');
                if (data.success == false) {
                    layer.msg("获取出错：" + data.message)
                    return
                }
                //console.log(data)
                var dataArray = data.data;
                if (dataArray.length == 0) {
                    layer.msg("查询没有数据")
                }
                app.orderList = dataArray


                //console.log(data.data)
            },
            error: function (error) {
                layer.closeAll('loading');
                //console.log(error)
            }
        })
    }
    getOrder(queryModel)

    var queryOrder = function () {
        queryModel.turnCreateDate = $("#turnCreateDate").val()
        queryModel.bindCreateDate = $("#bindCreateDate").val()
        queryModel.payTypeSelect = $("#payTypeSelect").val()
        getOrder(queryModel)
    }


    $.ajax({
        url: '${contextPath}/checking/getTbcocompNamesAndBankNamesAndMerNames', //
        type: 'post',
        data: queryModel,
        success: function (data) {
            if (data.success == false) {
                layer.msg("获取查询条件出错，请刷新页面")
                return
            }
            //console.log(data)
            var dataObj = data.data;
            app.tbcocompNames = dataObj.tbcocompNames
            app.bankNames = dataObj.bankNames
            app.merNames = dataObj.merNames
        },
        error: function (error) {
            //console.log(error)
            layer.msg("获取查询条件出错，请刷新页面")
        }
    })

    $('#turnCreateDate').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        minView: 2,
        showMeridian: 1,
        format: "yyyy-mm-dd",
        //startDate:new Date(),
    });

    $('#bindCreateDate').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        minView: 2,
        showMeridian: 1,
        format: "yyyy-mm-dd",
        //startDate:new Date(),
    });

    var exportExcel = function () {
        $("#exportExcelParamTbcocompName").val(queryModel.tbcocompName)
        $("#exportExcelParamBankName").val(queryModel.bankName)
        $("#exportExcelParamMerName").val(queryModel.merName)
        $("#exportExcelParamSettleDate").val(queryModel.settleDate)
        $("#exportExcelParamPayType").val(queryModel.payType)

        $("#exportExcel").submit();
    }
</script>
</html>